<script setup>
import { ref, reactive, computed, provide} from 'vue'
import usePager from '@/core/hooks/useRequestPager'
import suggestApi from '@/api/advice/SuggestApi'
import TableActionBar from '@/components/TableActionBar.vue'
import useTableBarEvent from '@/core/hooks/useTableBarEvent'

import SuggestForm from './SuggestForm.vue'
import SuggestView from './SuggestView.vue'
//
const editorForm = ref(null) //编辑表单
const previewForm = ref(null) //预览表单

const selectedKeys= ref([]) // 选中KEY
// 分页查询数据
const requsetService = () => {
  let searchData = {searchKey: 'search key', name: 'Ricky搜索'}
  return suggestApi.getListByPage(searchData)
}
const {
  refresh, run,
  loading,
  dataSource,
  pagination
} = usePager(requsetService)

// 定义列表字段
const columns = [
  { title: '缩图', dataIndex: 'thumb' },
  { title: '栏目', dataIndex: 'column' },
  { title: '标题', dataIndex: 'title' },
  { title: '作者', dataIndex: 'author' },
  { title: '标签', dataIndex: 'tags' },
  { title: '排序', dataIndex: 'idx' },
  { title: '状态', dataIndex: 'status' },
  { title: '创建时间/人', dataIndex: 'createOn' },
  { title: '操作', dataIndex: 'actions' }
]

// 表格头动作
const options = reactive({
  editor: computed(() => editorForm.value),  // 编辑器
  viewer: computed(()=> previewForm.value),  // 查看器
  selectedKeys: computed(() => selectedKeys.value), // 选中的数据的KEY集
  deleteService: suggestApi.deleteData, //api服务 - 册除
  approveService: suggestApi.approveData, //api服务 - 审核批准
  rejectService: suggestApi.rejectData, //api服务 - 审核拒绝
})
// const { addEvent, editEvent, deleteEvent, auditEvent, confirmEvent } = useTableBarEvent(options)
const { AllEvent , viewEvent} = useTableBarEvent(options)

// 表格行选项事件
const rowSelection = {
  onChange: (selectedRowKeys) => { selectedKeys.value = selectedRowKeys },
  getCheckboxProps: record => {  return { disabled: record.status.value === '3'  } }
}

// 刷新数据-调用refresh方法
provide('refreshData', refresh )
// 刷新页面-调用run方法
provide('refreshPage', run )
</script>
<template>
  <a-row :gutter="[16,16]">
    <a-col :span="24">
      <!-- 数据列表-->
      <a-table
        :row-selection="rowSelection"
        :data-source="dataSource"
        :columns="columns"
        :loading="loading"
        :pagination="pagination"
        :row-key="record=>record.id">
        <!-- 工具条栏 -->
        <template #title>
          <table-action-bar
            :actions="['refresh', 'add', 'edit', 'delete', 'confirm']"
            :on-refresh="refresh"
            :all-event="AllEvent"
            :advanced="false" />
        </template>
        <!-- 字段 -->
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'actions'">
            <a-button type="link" @click="viewEvent(record.id)">查看</a-button>
          </template>
          <!-- 栏目 -->
          <template v-else-if="column.dataIndex === 'column'">{{ record.column.label }}</template>
          <!-- 标签 -->
          <template v-else-if="column.dataIndex === 'tags'">{{ record.tags }}</template>
          <!-- 缩图 -->
          <template v-else-if="column.dataIndex === 'thumb'">
            <a-image :width="80" :src="record.thumb" />
          </template>
          <!-- 状态 -->
          <template v-else-if="column.dataIndex === 'status'">
            <a-tag color="pink">{{ record.status.label }}</a-tag>
          </template>
          <template v-else-if="column.dataIndex === 'createOn'">
            {{ record.createOn }}/{{ record.createBy }}
          </template>
        </template>
      </a-table>
      <!-- 编辑-表单 -->
      <suggest-form ref="editorForm" />
      <!-- 预览-表单 -->
      <suggest-view ref="previewForm" />
    </a-col>
  </a-row>
</template>